<template>
	<view class="content">
		<view class="personal-info">
			<view class="avatar">
				<image style="width: 100%; height: 100%;" mode="aspectFit" :src="info.src"></image>
			</view>
			<view class="info-content">
				<view class="info-name">{{ info.name }}</view>
				<view class="info-phone">{{ info.phone }}</view>
			</view>
		</view>
		<view class="info-list">
			<view class="list-items">
				<view class="list-avatar">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="brushFace.icon"></image>
				</view>
				<view class="list-content">
					<view>{{ brushFace.name }}</view>
					<view>
						<switch :checked="brushStatu" v-model="brushStatu" style="transform:scale(0.7);transform-origin: right;" @change="changeBrush" />
					</view>
				</view>
			</view>
			<view class="list-items" v-for="(items, index) in list" :key="index" @click="choose(items)">
				<view class="list-avatar">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="items.icon"></image>
				</view>
				<view class="list-content">
					<view>{{ items.name }}</view>
					<view class="list-arrow">
						<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.arrow"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="contact-us">
			<view class="contact-name">联系我们</view>
			<view class="contact-pgone"><a style="text-decoration: none;" href="tel:18059234137">18059234137</a></span></view>
		</view>
		<view style="width: 400rpx;height: 400rpx;">
			<image style="width: 100%; height: 100%;" mode="aspectFit" :src="src"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brushStatu: false,
				file: "",
				src: '',
				info: {
					src: '',
					name: '',
					phone: '',
				},
				brushFace: {
					name: '启用刷脸取餐',
					icon: '/static/images/icons/icon_rlcj@3x.png',
				},
				list: [{
						name: '消息',
						icon: '/static/images/icons/icon_xx@3x.png',
						page: '/pages/personal/news'
					},
					{
						name: '意见反馈',
						icon: '/static/images/icons/icon_yjfk@3x.png',
						page: '/pages/personal/feedback/index'
					}
				],
				icons: {
					arrow: '/static/images/icons/icon_next@3x.png'
				},
				title: 'Hello'
			};
		},
		created() {
			let token = "";
			const _this = this;
			uni.getStorage({
				key: 'uerInfo',
				success: function(res) {
					console.log('res', res)
					token = res.data.token;
					_this.info.name = res.data.nickname;
					_this.info.phone = res.data.mobile;
					_this.info.src = res.data.headimg;
				}
			});
			if (!token) {
				let key = this.getUrlKey('key')
				console.log('key', key)
				this.getMess(key);
			}
		},
		methods: {
			getMess(key) {
				const path = {
					app: "wx",
					api: "api_wx_user_login",
					version: "1.0",
					type: "1",
					data: {
						key: key
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			changeBrush(e) {
				this.brushStatu = e.detail.value
				if (e.detail.value) {
					this.imgup();
				}
			},
			choose(data) {
				console.log('name', data);
				if (data.page) {
					const _this = this;
					uni.navigateTo({
						url: data.page + '?' + _this.version
					})
				}
			},
			imgup() {
				let $this = this;
				wx.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function(res) {
						$this.file = res.tempFiles[0];
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							url: 'https://tv.kdtyun.com/ad1/public/index.php?s=api/index/uploadVideo', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'video',
							type: 'post',
							formData: {

							},
							success: (uploadFileRes) => {
								const fileData = JSON.parse(uploadFileRes.data);
								if (fileData.code === 1) {
									$this.src = fileData.data.video_url
								} else {
									uni.showToast({
										icon: "none",
										title: fileData.msg,
										duration: 2000
									});
								}
								uni.hideLoading();
							}
						});
					}
				});
			},
			getSock(res) {
				console.log('res', res)
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);
					} else {
						if (resj.api === "api_wx_user_login") {
							console.log('key登录', resj.data)
							this.$store.commit('login', resj.data);
							this.info.name = resj.data.nickname;
							this.info.phone = resj.data.mobile;
							this.info.src = resj.data.headimg;
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							console.log('token登录', resj.data)
							this.temporary()
						}
					}
				}
			}
		}
	};
</script>
<style>
	page {
		background-color: #f7f4f8;
	}

	.personal-info {
		height: 212rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 132rpx;
		height: 132rpx;
		margin: 40rpx;
	}

	.avatar image {
		border-radius: 50%;
	}

	.info-name {
		font-size: 48rpx;
		color: #222222;
		font-family: 'PingFang SC';
		font-weight: bold;
	}

	.info-phone {
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #999999;
		font-family: 'PingFang SC';
		font-weight: 500;
	}

	.list-items {
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		height: 100rpx;
	}

	.info-list {
		margin-top: 20rpx;
		background-color: #ffffff;
	}

	.list-avatar {
		width: 40rpx;
		height: 40rpx;
	}

	.list-content {
		margin-left: 15rpx;
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.info-list .list-items:not(:last-child) .list-content {
		border-bottom: 1rpx solid #e0e0e0;
	}

	.list-arrow {
		width: 15rpx;
		height: 32rpx;
	}

	.contact-us {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 0 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		height: 98rpx;
	}

	.contact-pgone {
		color: #268dff;
	}
</style>
